<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const rules = ref([
  {
    title: '能量获取',
    items: [
      '每日登录：每日登录可获得1点能量',
      '每日签到：每日签到可获得1点能量',
      '邀请好友：每成功邀请1位好友可获得10点能量'
    ]
  },
  {
    title: '能量使用',
    items: [
      'AI对话：每次对话消耗1点能量',
      'AI绘画：每次绘画消耗2点能量',
      '其他AI功能：根据具体功能消耗不同数量能量'
    ]
  },
  {
    title: '其他说明',
    items: [
      '能量有效期：永久有效',
      '能量转赠：暂不支持',
      '能量上限：无上限'
    ]
  }
])

const goBack = () => {
  router.back()
}
</script>

<template>
  <div class="rules-page">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <div class="back-btn" @click="goBack">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
        </svg>
      </div>
      <div class="title">规则说明</div>
      <div class="placeholder"></div>
    </div>

    <!-- 规则内容 -->
    <div class="rules-content">
      <div 
        v-for="(section, index) in rules" 
        :key="index"
        class="rule-section"
      >
        <div class="section-title">{{ section.title }}</div>
        <ul class="rule-list">
          <li 
            v-for="(item, itemIndex) in section.items" 
            :key="itemIndex"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.rules-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-top: env(safe-area-inset-top);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: linear-gradient(90deg, #f5a8f0 0%, #7ecfff 100%);
  color: white;
}

.back-btn {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.title {
  font-size: 17px;
  font-weight: 500;
}

.placeholder {
  width: 24px;
}

.rules-content {
  padding: 16px;
}

.rule-section {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
}

.rule-list {
  margin: 0;
  padding-left: 20px;
}

.rule-list li {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
}

.rule-list li:last-child {
  margin-bottom: 0;
}
</style> 